<template>
  <div class="message">
    <div class="search">
      <span>设备类型</span>
      <el-select v-model="inputType" clearable placeholder="请选择" slot="append" @change="search">
        <el-option v-for="item in options" :key="item.key" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="max">
      <div class="left">
        <div class="image">
          <img style src="/static/image/ShowMap/07.png" alt>
        </div>
        <div class="left-message">
          <h4>设备场所信息</h4>
          <el-form label-width="100px">
            <el-form-item label="所在区域：">{{leftarea}}</el-form-item>
            <el-form-item label="场所名称：">{{leftname}}</el-form-item>
            <el-form-item label="详细地址：">{{leftadress}}</el-form-item>
            <el-form-item label="负责人：">{{leftuser}}</el-form-item>
            <el-form-item label="负责人电话：">{{leftphone}}</el-form-item>
          </el-form>
        </div>
      </div>
      <div class="right">
        <div class="box">
          <div class="mess">
            <img src="/static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
            <span class="font">在线设备数量</span>
          </div>
          <div class="number">
            <div class="number-box">
              <img src="/static/image/ShowMap/01.png" style="float:left">
              <div class="number-right">
                <div class="mmp">
                  <div style="font-size:16px; color:#666;white-space:nowrap;">
                    <b>在线设备</b>
                  </div>
                  <div style="font-size:30px;color:#4883FF;">
                    <b>{{show.online}}</b>
                  </div>
                </div>
              </div>
            </div>
            <img src="/static/image/ShowMap/dish.png" class="dish">
          </div>
        </div>
        <div class="box">
          <div class="mess">
            <img src="/static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
            <span class="font">离线设备数量</span>
          </div>
          <div class="number">
            <div class="number-box">
              <img src="/static/image/ShowMap/02.png" style="float:left">
              <div class="number-right">
                <div class="mmp">
                  <div style="font-size:16px; color:#666;white-space:nowrap;">
                    <b>离线设备</b>
                  </div>
                  <div style="font-size:30px;color:#FFAA29;">
                    <b>{{show.offline}}</b>
                  </div>
                </div>
              </div>
            </div>
            <img src="/static/image/ShowMap/dish.png" class="dish">
          </div>
        </div>
        <div class="box">
          <div class="mess">
            <img src="/static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
            <span class="font">警情异常数量</span>
          </div>
          <div class="number">
            <div class="number-box">
              <img src="/static/image/ShowMap/03.png" style="float:left">
              <div class="number-right">
                <div class="mmp">
                  <div style="font-size:16px; color:#666;white-space:nowrap;">
                    <b>警情异常</b>
                  </div>
                  <div style="font-size:30px;color:#2DDFEE;">
                    <b>{{show.wpAlarmCount}}</b>
                  </div>
                </div>
              </div>
            </div>
            <img src="/static/image/ShowMap/dish.png" class="dish">
          </div>
        </div>
        <div class="box">
          <div class="mess">
            <img src="/static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
            <span class="font">低电量报警数量</span>
          </div>
          <div class="number">
            <div class="number-box">
              <img src="/static/image/ShowMap/04.png" style="float:left">
              <div class="number-right">
                <div class="mmp">
                  <div style="font-size:16px; color:#666;white-space:nowrap;">
                    <b>低电量报警</b>
                  </div>
                  <div style="font-size:30px;color:#FF5141;">
                    <b>{{show.voltAlarmCount}}</b>
                  </div>
                </div>
              </div>
            </div>
            <img src="/static/image/ShowMap/dish.png" class="dish">
          </div>
        </div>
        <div class="box">
          <div class="mess">
            <img src="/static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
            <span class="font">传感器异常数量</span>
          </div>
          <div class="number">
            <div class="number-box">
              <img src="/static/image/ShowMap/05.png" style="float:left">
              <div class="number-right">
                <div class="mmp">
                  <div style="font-size:16px; color:#666;white-space:nowrap;">
                    <b>传感器异常</b>
                  </div>
                  <div style="font-size:30px;color:#9E43FF;">
                    <b>{{show.exception}}</b>
                  </div>
                </div>
              </div>
            </div>
            <img src="/static/image/ShowMap/dish.png" class="dish">
          </div>
        </div>
        <div class="box" style="margin:0">
          <div class="mess">
            <img src="/static/image/ShowMap/l.png" style="float:left;margin:1px 8px 0 0">
            <span class="font">设备状态正常数量</span>
          </div>
          <div class="number">
            <div class="number-box">
              <img src="/static/image/ShowMap/06.png" style="float:left">
              <div class="number-right">
                <div class="mmp">
                  <div style="font-size:16px; color:#666;white-space:nowrap;">
                    <b>正常设备</b>
                  </div>
                  <div style="font-size:30px;color:#9E43FF;">
                    <b>{{show.exception}}</b>
                  </div>
                </div>
              </div>
            </div>
            <img src="/static/image/ShowMap/dish.png" class="dish">
          </div>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <el-table :data="listData" :header-cell-style="getRowClass" v-loading="loading" stripe id="tab">
      <el-table-column prop="num" label="序号" width="100"></el-table-column>
      <el-table-column prop="devname" label="设备类型">
        <template slot-scope="scope">
          <div style="display: inline;" v-if="scope.row.devname =='fireplug'">消防栓</div>
          <div style="display: inline;" v-if="scope.row.devname =='scm'">烟感设备</div>
        </template>
      </el-table-column>
      <el-table-column prop="imei" label="设备编号"></el-table-column>
      <el-table-column prop="fireplugId" label="位置编号"></el-table-column>
      <el-table-column label="设备电量">
        <template slot-scope="scope">
          <div style="display: inline;" v-if="scope.row.volt < 10">请尽快更换电池</div>
          <div style="display: inline;" v-if="scope.row.volt > 20">电量充足</div>
          <div style="display: inline;" v-if="scope.row.volt > 10 &&  scope.row.volt < 20">电量低</div>
        </template>
      </el-table-column>
      <el-table-column prop="onlineState" label="在线状态">
        <template slot-scope="scope">
          <span>{{ scope.row.onlineState==='ONLINE'?'在线':'离线'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="alert" label="传感器状态">
        <template slot-scope="scope">
          <div style="display: inline;" v-if="scope.row.sensor === '传感器正常'">正常</div>
          <div style="display: inline;" v-if="scope.row.sensor !== '传感器正常' ">异常</div>
        </template>
      </el-table-column>
      <el-table-column label="警情状态">
        <template slot-scope="scope">
          <div
            style="display: inline;"
            v-if="scope.row.devname =='fireplug'&&scope.row.wpdata > 0.07"
          >{{scope.row.wpdata}}MPa水压正常</div>
          <div
            style="display: inline;"
            v-if="scope.row.devname =='fireplug'&&scope.row.wpdata < 0.07"
          >{{scope.row.wpdata}}MPa水压异常</div>
          <div
            style="display: inline;"
            v-if="scope.row.devname =='scm' &&  scope.row.alarmtype === '无警情'"
          >无警情</div>
          <div
            style="display: inline;"
            v-if="scope.row.devname == 'scm' &&  scope.row.alarmtype !== '无警情' "
          >烟感报警</div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop='fireAdress' label='设备位置' >
				<template slot-scope='scope'>
          <span :title="scope.row.fireAdress">{{ scope.row.fireAdress}}</span>
        </template>
      </el-table-column>-->
      <el-table-column prop="alert" label="设备状态">
        <template slot-scope="scope">
          <span
            :style="scope.row.alert === 0 ? scope.row.onlineState==='ONLINE'?'color:#2975FF':'color:#EB3838' :'color:#EB3838'"
          >{{ scope.row.alert === 0 ? scope.row.onlineState==='ONLINE'?'正常':'异常' :'异常' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="page-left">
        <span>共{{ this.totals}}条数据</span>
        <span>每页:</span>
        <el-input
          placeholder="条数"
          v-model="inputs"
          @blur="enter"
          @keyup.enter.native="enter"
          clearable
        ></el-input>
        <span>条</span>
      </div>
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :page-size="pageSize"
        :total="totals"
        @current-change="handleCurrentChanges"
        id="page"
        :current-page.sync="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Config from "../../../../config";
import BMap from "BMap";
// import { regionDataPlus } from "element-china-area-data";
import { regionDataPlus } from 'static/js/regionData'
export default {
  name: "Message",
  data: function () {
    return {
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "fireplug",
          label: "消防栓"
        },
        {
          value: "scm",
          label: "烟感设备"
        }
      ],
      inputType: "", // 下拉搜索
      // 展示数据
      show: {},
      leftarea: "", //左侧区域展示
      leftname: "", // 左侧名称
      leftadress: '',
      leftuser: "", // 左侧用户名
      leftphone: "", // 左侧电话
      //列表
      listData: [
        {
          num: 1,
          dev_equip_id: 2,
          asd: 12,
          sn_no: "不知道",
          sw_version: 15,
          devstate: "不知道"
        },
        {
          num: 1,
          dev_equip_id: 2,
          asd: 0.1,
          sn_no: "不知道",
          sw_version: 30,
          devstate: "不知道"
        }
      ],
      // loading
      loading: false,
      // 分页
      totals: 10,
      currentPage: 1,
      pageSize: 15,
      inputs: 15,

      //小区id
      site_id: null,
    };
  },

  methods: {
    // 表头添加背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#f6f6f6";
      } else {
        return "";
      }
    },
    // 回车事件
    enter() {
      if (+this.inputs === 0) {
        this.inputs = 15;
      }
      if (Number.isInteger(+this.inputs)) {
        this.pageSize = +this.inputs;
        this.currentPage = 1;
        this.search();
      } else {
        this.$message({
          message: "请输入整数",
          type: "warning"
        });
      }
    },
    // 分页
    handleCurrentChanges(val) {
      if (this.inputType === "" || this.inputType === null) {
        this.get_list(val - 1, this.pageSize);
      } else {
        this.get_list(val - 1, this.pageSize, this.inputType);
      }
    },
    // 展示数据
    get_show() {
      let url = `${Config.FIREPLUG}/fireplug/count`;
      let param = {
        site_id: this.site_id,
        devname: this.inputType?this.inputType:undefined
      };
      this.$http.post(url, param).then(res => {
        this.show = res;
      });
    },
    // 左侧展示场所详情
    get_topdata() {
      let url = `${Config.DEVICE_MANAGE_URL}/final_equipsite/query`;
      let param = {
        id: this.site_id
      };
      this.$http.get(url, param).then(res => {
        if (res.array.length) {
          res.array.forEach((item, i) => {
            this.handleData(item);
            this.leftarea = item.areaName;
            this.leftname = item.site_name;
            this.leftadress = item.address;
          });
        }
      });
    },
    get_leftdata() {
      let url = `${Config.DEVICE_MANAGE_URL}/site_user/query`;
      let param = {
        site_id: this.site_id
      };
      this.$http.get(url, param).then(res => {
        if (res.array.length) {
          res.array.forEach((item, i) => {
            this.leftuser = item.name;
            this.leftphone = item.phone;
          });
        }
      });
    },
    // 上方搜索
    search() {
      this.get_show()
      if (this.inputType === "" || this.inputType === null) {
        this.get_list(0, this.pageSize);
      } else {
        this.get_list(0, this.pageSize, this.inputType);
      }
    },
    // 获取列表
    get_list(page, size, devname) {
      this.loading = true;
      let url = `${Config.FIREPLUG_APP_URL}/fireplug/data/search?page=${page}&size=${size}`;
      let param = {
        site_id: this.site_id,
        devname: devname
      };
      this.$http.post(url, param).then(res => {
        // console.log(res)
        this.totals = res.total;
        if (res.content.length) {
          res.content.map((item, i) => {
            if (this.currentPage === 1) {
              item.num = i + 1;
            } else {
              item.num = (this.currentPage - 1) * this.pageSize + i + 1;
            }
            // this.handleData(item)
            // item.fireAdress = item.areaName + item.siteName + item.siteAddress

            // 判断位数 二进制转换
            if (typeof (item.alert) === 'number') {
              let type = item.alert.toString(2).padStart(8, "0").split("").reverse();
              for (var b = 0; b < type.length; b++) {
                if (type[b] === "0") {
                  switch (b) {
                    case 0:
                      item.alarmtype = '无警情'
                      break;
                    case 3:
                      item.sensor = '传感器正常'
                      break;
                  }
                }
              }
            }


          });
          this.listData = res.content;
          this.loading = false;
        } else {
          this.listData = res.content;
          this.loading = false;
        }
      });
    },
    handleData(item) {
      const province = this.getAreaObj(regionDataPlus, item.province)
      if (item.city === '419000' || item.district === '419001' || item.district === '济源市') {
        item.areaName = `${province.label}济源市`
      } else {
        const city = this.getAreaObj(province.children, item.city)
        const district = item.district ? this.getAreaObj(city.children, item.district) : {label: ''}
        item.areaName = `${province.label}${city.label}${district.label}`
      }
    },
    /**
     * 获取区域信息
     * @param {Array} arr
     * @param {String} value
     * @return {Object} obj
     * */
    getAreaObj(arr, value) {
      let obj = null;
      arr.some(item => {
        if (value === item.value) {
          obj = item;
          return true;
        }
      });
      return obj;
    }
  },
  mounted() {
    let arr = this.$route.params.id.split(',')
    this.inputType = arr[0]
    this.site_id = arr[1]

    this.get_show();
    this.get_topdata()
    this.get_leftdata();

    if (this.inputType === "" || this.inputType === null) {
      this.get_list(0, this.pageSize);
    } else {
      this.get_list(0, this.pageSize, this.inputType);
    }
  }
};
</script>
<style lang="scss">
@import "../../../../../static/scss/common";
@import "../../../../../static/scss/design-list";
.message {
  width: 100%;
  // 上方搜索
  .search {
    height: 32px;
    width: 180px;
    display: inline-block;
    background: #fff;
    margin-bottom: 12px;
    text-align: center;
    line-height: 32px;
    > span {
      font-size: 14px;
      color: #333;
      position: relative;
    }
    > span::before {
      position: absolute;
      display: block;
      right: -8px;
      top: 3px;
      content: " ";
      width: 1px;
      height: 16px;
      background: #f0f0f0;
      z-index: 1;
    }
    .el-select {
      width: 104px;
      .el-input--suffix {
        .el-input__inner {
          border: 0;
          border-radius: 0;
          color: #333;
        }
        .el-input__suffix {
          .el-input__suffix-inner {
            .el-input__icon {
              line-height: 32px;
              width: 15px;
            }
          }
        }
      }
    }
  }
  .max {
    width: 100%;
    height: 308px;
    overflow: hidden;
    margin-bottom: 24px;
    .left {
      width: 41%;
      height: 100%;
      display: inline-block;
      float: left;
      background: #fff;
      margin-right: 16px;
      padding: 40px 0 20px 40px;
      box-sizing: border-box;
      .image {
        width: 35%;
        // height: 224px;
        float: left;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .left-message {
        float: left;
        margin-left: 30px;
        width: calc(64% - 30px);
        h4 {
          font-size: 32px;
          color: #f84646;
          // margin-bottom: 20px;
        }
        .el-form {
          .el-form-item {
            height: 36px;
            line-height: 36px;
            display: inline-block;
            width: 100%;
            .el-form-item__label {
              padding: 0;
              font-size: 16px;
              color: #333;
            }
          }
        }
      }
    }
    .right {
      width: calc(59% - 16px);
      height: 100%;
      float: left;
      .box {
        float: left;
        width: 32.47%;
        height: 146px;
        background: #fff;
        margin-right: 1.2%;
        box-sizing: border-box;
        padding: 12px;
        .mess {
          width: 100%;
          height: 31px;
          border-bottom: 1px solid #f2f2f2;

          .font {
            color: $gray6;
            font-size: 16px;
            font-weight: bold;
          }
        }
        .number {
          height: calc(100% - 30px);
          width: 100%;
          display: inline-block;
          margin: auto;
          position: relative;
          .number-box {
            width: 80%;
            height: 90%;
            position: absolute;
            // margin-left: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            .number-right {
              float: left;
              height: 100%;
              position: relative;
              .mmp {
                width: 100%;
                height: 50px;
                position: absolute;
                margin: auto;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
              }
            }
          }
          .dish {
            position: absolute;
            right: -12px;
            bottom: -12px;
          }
        }
      }
      .box:nth-child(-n + 3) {
        margin-bottom: 16px;
      }
      .box:nth-child(3) {
        margin-right: 0;
      }
    }
  }
  .pagination {
    padding: 32px 0 44px 23px;
    background: #fff;
    .page-left {
      font-size: 12px;
      display: inline-block;
      .el-input--suffix {
        width: 56px;
      }
    }
  }

}
</style>
